import React from 'react';
import { inject, observer } from 'mobx-react';

@inject('portalLoginStore')
@observer
class MultiLang extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { portalLoginStore, overClass, isSetting, getState } = this.props;
        let { multiLangs, state, setState } = portalLoginStore;
        state = getState();
        const { langId, langText, hasMultiLang, multiLangVisible } = state;

        if (!hasMultiLang) {
            return <div className="e8login-multiLang" />;
        }

        let selectedClassName = '';
        let multiLangListComp = '';
        if (multiLangVisible) {
            selectedClassName = 'e8login-multiLangText-selected';
            multiLangListComp = (
                <div className="e8login-multiLangList">
                    <ul>
                        {
                            multiLangs.map(item => (
                                    <li
                                      className={`e8login-multiLangList-item ${item.id == langId ? 'e8login-multiLangList-selected' : ''}`}
                                      onClick={() => {
                                            portalLoginStore.getLoginForm({ langId: item.id });
                                            portalLoginStore.setState({ langId: item.id, langText: item.language, multiLangVisible: false });
                                        }}
                                    >
                                        {item.language}
                                    </li>
                                ))
                        }
                    </ul>
                </div>
            );
        }

        return (
            <div className={`e8login-multiLang ${overClass}`}>
                <div
                  className={`e8login-multiLangText ${selectedClassName}`}
                  onClick={(e) => {
                        if (!isSetting) {
                            e.preventDefault && e.preventDefault();
                            e.stopPropagation && e.stopPropagation();
                            setState({ multiLangVisible: !multiLangVisible });
                        }
                    }}
                >
                    <div className="e8login-multiLangText-text">{langText}</div>
                    <div className="e8login-multiLangText-icon">▼</div>
                </div>
                {multiLangListComp}
            </div>
        );
    }
}

export default MultiLang;
